<% extends "common/msui.html" %>
<% block title %>首页<% endblock %>
<% block body %>
<% set maxItems = _pool.get('product.template').get_template_count(categ_id, brand_id) %>
<% set itemsPerLoad = _pool.get('ir.config_parameter').get_param('mshop_scroll_load_num') %>
<div class="page" id='products' ms-controller='products'>
  <header class="bar bar-nav">
    <a class="icon icon-cart pull-right" href='/mshop?tab=cart'></a>
    <h1 class="title">东方团购中心</h1>
    <a class="button button-link button-nav pull-left back" href="/mshop/index" >
      <span class="icon icon-left"></span>
      返回
    </a>
  </header>

  <div class="content infinite-scroll" >
    <div ms-repeat-product='products'>
      <a ms-attr-href="/mshop/product/?product_id={{product.id}}">
        <div class="card">
          <div class="card-content">
            <div class="list-block media-list">
              <ul>
                <li class="item-content">
                  <div class="item-media">
                      <img width="80" height="80" ms-attr-src="/website/image/product.template/{{product.id}}/image" />
                  </div>
                  <div class="item-inner product-list-desc">
                    <div class="item-title-row">
                      <div class="item-title">{{product.name}}</div>
                      <div class='item-after' style='color:red'>￥{{product.lst_price}}</div>
                    </div>
                    <div class="item-subtitle">{{product.description_sale}}</div>
                  </div>
                </li>
              </ul>
            </div>

          </div>
        </div>
      </a>
    </div>

      <!-- 加载提示符 -->
    <div class="infinite-scroll-preloader">
        <div class="preloader"></div>
    </div>
  </div>

  <footer>
    <nav class="bar bar-tab index-footer">
      <a class="tab-item" href="/mshop?tab=index">
        <span class="icon icon-home"></span>
        <span class="tab-label">首页</span>
      </a>
      <a class="tab-item" href="/mshop?tab=cart">
        <span class="icon icon-cart"></span>
        <span class="tab-label">购物车</span>
      </a>
      <a class="tab-item" href="/mshop?tab=my">
        <span class="icon icon-me"></span>
        <span class="tab-label">我的</span>
      </a>
    </nav>
  </footer>
  

  <script type="application/javascript">
  $(function() {
    // 最多可加载的条目
    var maxItems = ${ maxItems | safe };
    var categ_id = ${categ_id or 'false' | safe};
    var brand_id = ${brand_id or 'false' | safe}

    // 每次加载添加多少条目
    var itemsPerLoad = ${ itemsPerLoad or '15' | safe };

    var loading = false;
    var lastIndex = 0;

    function addItems(index, numbers) {
        $.ajax({
            url: '/mshop/products/get',
            data: {
                'last_index': index,
                'numbers': numbers,
                'categ_id': categ_id,
                'brand_id': brand_id,
            },
            type: 'get',
            success: function(e) {
                var res = JSON.parse(e);
                products_vm.products = products_vm.products.concat(res);
                lastIndex += numbers;
                loading = false;

                check_max(lastIndex, maxItems);
            },
            async: true,
        })
    };

    function check_max(index, max) {
        if (index >= max) {
            $.detachInfiniteScroll($('.infinite-scroll'));
            // 删除加载提示符
            $('.infinite-scroll-preloader').remove();
        };
    };

    // 注册'infinite'事件处理函数, 由light7处理
    $(document).on('infinite', '.infinite-scroll', function() {
        if (loading) {
            return;
        }

        loading = true;
        addItems(lastIndex, itemsPerLoad);
        $.refreshScroller()
    });

    var products_vm = avalon.define({
        $id: 'products',
        products: [],
    });

    addItems(lastIndex, itemsPerLoad);
    avalon.scan();
  });
  </script>
<% endblock %>
</div>